<template>
  <div class="app-main" v-loading="loading">
    <div class="divTmp" v-show="loading"></div>
    <div class="course-student-spoc" v-show="!loading">
      <div class="clearfix stucourse-wra">
        <div class="courseinfo-wra">
          <div class="courseinfo-name">{{teacher.classes}}</div>
          <div class="courseinfo-code">班课编码：{{teacher.number}}</div>
        </div>
        <ul class="clearfix teateam-ul">
          <li class="teateam-li teateam-li-num1">
            <img class="teateam-avatar" src="../../../../assets/common/defaultHeaderLg.png"/>
            <div class="teateam-name">
              <span>{{teacher.teachers}} 老师</span>
            </div>
            <div class="teateam-role">
              <span>任课教师</span>
            </div>
          </li>
        </ul>
      </div>

    </div>
    <div class="course-student-stat">
      <el-table
          :data="tableData"
          class="student-table"
          :default-sort = "{prop: 'number', order: 'descending'}"
          style="width: 100%;">
        <el-table-column
            prop="serial"
            align="center"
            width="105">
          <template slot="header" slot-scope="scope">
            <span>序号 </span>
            <span style=" font-size: 12px;
                      color: #969696;
                      font-weight: 400;">总计{{pagination.counts}}个</span>
          </template>
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="250">
        </el-table-column>
        <el-table-column
            prop="number"
            label="学号"
            sortable
            width="238">
        </el-table-column>
        <el-table-column
            prop="group"
            label="小组"
            width="215">
          <template slot-scope="scope">
            --
          </template>
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="67">
        </el-table-column>
      </el-table>
      <div class="course-student-pagination-wrapper">
        <el-pagination
            class="course-student-pagination pagination-wrap stu-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-size="pagination.pageSize"
            layout="prev,pager,next, jumper"
            :total="pagination.counts">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Empty from './Empty'
import {courseInfoGet} from "@/apis/teacher";
import {studentGetAll} from "@/apis/student";

export default {
  components:{
    Empty,
  },
  props:{

    course: {},
  },

  data(){
    return{
      loading: true,
      tableData: [],
      teacher: {
        teachers: '',
        classes: '',
        number: '',
      },
      pagination: {
        pageSize: 10,
        page: 1,
        name: '',
        counts: 0,
        id: '',
      },
    }
  },
  created() {

    this.init()
  },

  methods:{
    // 初始化资源
    async init(){
      this.closeLoading()

      this.get()
    },
    get(){
      let courseId = this.course.id
      // 获取对应老师信息
      courseInfoGet(courseId).then((resp) => {
        this.teacher = resp?.data?.data
        console.log(resp?.data?.data)
      })

      // 获取该班级所有学生信息
      studentGetAll(courseId,this.pagination.page,this.pagination.pageSize).then((resp) => {
        this.tableData = resp?.data?.data?.records
        this.pagination.counts = resp?.data?.data?.total
        console.log(resp?.data?.data)
      })
    },

    // 分页菜单页码的改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.get()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.get()
    },

    // 加载动画
    closeLoading() {
      this.timer = null
      this.timer = setTimeout(() => {
        this.loading = false
      }, 500)
    },

  }
}
</script>

<style scoped>
.divTmp {
  width: 100%;
}

::v-deep .el-loading-mask {
  transition: opacity 0s;
}

::v-deep .el-loading-spinner {
  top: 100%;
  margin-top: 30%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.course-student-spoc {
  position: relative;
}


::v-deep .el-table thead {
  color: black;
}
.stucourse-wra{
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 24px;
}

.courseinfo-wra {
  float: left;
  padding: 20px;
  background: url(../../../../assets/common/stu_member2.png) no-repeat 50%;
  background-size: 100% 100%;
  border-radius: 4px;
  position: relative;
  width: 35%;
  height: 120px;
  color: #fff;
}
.courseinfo-name {
  max-height: 72px;
  font-size: 18px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.courseinfo-code {
  margin-top: 12px;
}

.teateam-ul {
  margin-left: 36%;
  background: url(../../../../assets/common/stu_member3.png) no-repeat 50%;
  background-size: 100% 100%;
  border-radius: 4px;
  text-align: center;
  height: 120px;
}
ul {
  padding: 0;
  margin: 0;
}

.teateam-li {
  padding: 24px 10px 5px;
  text-align: center;
  position: relative;
  display: inline-block;
  width: 20%;
  height: 120px;
  vertical-align: top;
}
.teateam-li.teateam-li-num1 {
  width: 90%;
}

.teateam-avatar {
  border-radius: 50%;
  margin-bottom: 5px;
  width: 32px;
  height: 32px;
}

img {
  border: 0;
}

.teateam-name {
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 3px;
}

.teateam-role {
  font-size: 12px;
  color: #969696;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.course-student-stat {
  position: relative;
}
.student-table {
  width: 100%;
  color: #444;
  border-top: 1px rgba(3,2,3,0.11) solid;
}
::v-deep .el-table__empty-block {
  min-height: 46px;
}
::v-deep .el-table__empty-text {
  line-height: 46px;
}

.course-student-pagination-wrapper {
  margin: 12px auto;
  text-align: center;
}

</style>